<template>
    <div class="main">
        <el-container>
            <el-aside width="auto">
                <!-- 左侧边栏 -->
                <LeftNav></LeftNav>
            </el-aside>
            <el-container>
                <!-- 头部 -->
                <el-header>
                    <Header></Header>
                </el-header>
                <el-main class="el-main">
                    <!-- 内容部分 -->
                    <transition name="float" mode="out-in">
                        <router-view></router-view>

                    </transition>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>

import LeftNav from "@/components/leftnav.vue"
import Header from "@/components/header.vue"
export default {
    data() {
        return {}
    },
    components: {
        LeftNav,
        Header,
    },
    mounted() {

    },
}
</script>

<style lang="less" scoped>
.el-header {
    padding: 0;
}

.main {
    display: flex;
    height: 100%;
    background: url("@/assets/111.png") no-repeat center center fixed;
    background-size: cover;


}

.el-main {
    background: url("@/assets/bg4.png") no-repeat fixed;
}

.float-enter-active,
.float-leave-active {
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.float-enter,
.float-leave-to

/* .float-leave-active in <2.1.8 */
    {
    transform: translateY(20px);
    opacity: 0;
}

.fixed-aside {
    position: fixed;
    width: 200px;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 1000;
}


.el-main {
    background: url("@/assets/bg4.png") no-repeat fixed;
    overflow-y: auto;
}

/* 滚动条的宽度 */
.el-main::-webkit-scrollbar {
    width: 8px;
}
</style>